import React, { Component } from "react";
import styles from "./buy.module.scss";

export default class Buy extends Component {
  state = {
    select: NaN,
    selectsize: NaN,
    color: [
      {
        id: 111,
        kind: "香芋紫",
      },
      {
        id: 22,
        kind: "粉色",
      },
      {
        id: 333,
        kind: "白色",
      },
    ],
    size: [
      {
        id: 111,
        kind: "  55-65cm",
      },
      {
        id: 22,
        kind: "65-75cm",
      },
      {
        id: 333,
        kind: "40m",
      },
    ],
    num: 1,
  };
  handleCount = (e) => {
      let num=this.state.num
    if (e.target.attributes.type.nodeValue === "increament") {
      this.setState({
        num:++num,
      });
    } else if (e.target.attributes.type.nodeValue === "decreament") {
      this.setState({
        num:--num,
      });
    }
  };
  handlecolor = (index) => {
    this.setState({
      select: index,
    });
  };
  handlesize = (index) => {
    this.setState({
      selectsize: index,
    });
  };

  shutBuy = () => {
    document.getElementById("buycom").style.display = "none";
  };
  render() {
    return (
      <div className={styles.popupBuy}>
        <div className={styles.goodsimg}>
          <img src={this.props.img} alt="" />
          <span className={styles.priase}>价格：￥159</span>
        </div>
        <div className={styles.color}>
          <p>颜色</p>
          {this.state.color.map((v, index) => {
            return (
              <span
                key={v.id}
                onClick={this.handlecolor.bind(this, index)}
                className={
                  styles.colorKind +
                  " " +
                  (this.state.select === index ? styles.active : "")
                }
              >
                {v.kind}
              </span>
            );
          })}
        </div>
        <div className={styles.size}>
          <p>尺码</p>

          {this.state.size.map((v, index) => {
            return (
              <span
                key={v.id}
                onClick={this.handlesize.bind(this, index)}
                className={
                  styles.sizenumber +
                  " " +
                  (this.state.selectsize === index ? styles.active : "")
                }
              >
                {v.kind}
              </span>
            );
          })}
        </div>
        <div className={styles.number}>
          <p>数量</p>
          <span
            className={styles.decreament}
            type="decreament"
            onClick={this.handleCount.bind(this)}
          >
            -
          </span>
          <span className={styles.num}> {this.state.num}</span>
          <span
            className={styles.decreament}
            type="increament"
            onClick={this.handleCount.bind(this)}
          >
            +
          </span>
        </div>
        <div className={styles.comfirm} onClick={this.shutBuy}>
          确定
        </div>
      </div>
    );
  }
}
